/**申请发票 */
<template>
  <div class="add-invoice-page">
    <el-card>
      <div slot="header">
        <line-header title="申请发票"></line-header>
      </div>
      <div class="card-body">

        <div class="invoice-content-box">
          <!--管理审核-->
          <template v-if="userInfo.role==1||userInfo.role==4">

            <template v-if="form.status==1">
              <div class="top-step" >
                <xStep :items="list" :active="activeId"></xStep>
              </div>
            </template>
            <div v-show="activeId == 0" class="top-alert-box" style="margin-bottom: 1rem;">
              专用发票税率：6%；开票⾦额必须⼤于1000。
            </div>
            <el-form v-show="activeId == 0" ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="用户名：" prop="account" v-if="!isNewInvoice">
                <el-input
                  v-model="form.account"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>

              <el-form-item label="可开票金额：" prop="balance">
                <el-input

                  placeholder="请输入可开票金额"
                  :value="'￥'+(userInfo.leftInvoiceAMount*0.01).toFixed(2)"
                  disabled
                ></el-input>
              </el-form-item>


              <el-form-item v-if="!isNewInvoice" label="开票金额：" prop="amount">
                <el-input
                  :value="'￥'+(form.amount*0.01).toFixed(2)"
                  placeholder="请输入开票金额"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>

              <el-form-item v-else label="开票金额：" prop="amount">
                <el-input
                  v-model="form.amount"
                  placeholder="请输入开票金额"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>

              <el-form-item label="发票抬头：" prop="title">
                <el-input
                  v-model="form.title"
                  placeholder="请输入公司名称"
                  :disabled="!isNewInvoice"
                ></el-input>
                <div class="input-sign-box">
                  提示：平台将对税号和发票抬头进行匹对核实
                </div>
              </el-form-item>
              <el-form-item label="发票类型：" prop="kind">
                <el-radio-group v-model="form.kind" >
                  <el-radio :disabled="!isNewInvoice" :label="1"
                  >增值税普通发票
                  </el-radio
                  >
                  <el-radio :disabled="!isNewInvoice" :label="2"
                  >增值税专业发票
                  </el-radio
                  >
                </el-radio-group>
              </el-form-item>
              <el-form-item label="纳税人识别号：" prop="sno">
                <el-input
                  v-model="form.sno"
                  placeholder="请输入公司的纳税人识别号"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>
              <el-form-item label="地址：" prop="iAddress">
                <el-input
                  v-model="form.iAddress"
                  placeholder="请输入公司实际办公地址信息"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>

              <el-form-item label="电话：" prop="iPhone">
                <el-input
                  v-model="form.iPhone"
                  placeholder="请输入公司的官方电话"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户行：" prop="iBank">
                <el-input
                  v-model="form.iBank"
                  placeholder="请输入对公账户开户行"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>
              <el-form-item label="银行账号：" prop="iBankCode">
                <el-input
                  v-model="form.iBankCode"
                  placeholder="请输入对公账户"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>
              <el-form-item label="反馈信息：">
                <el-input
                  v-model="form.mark"
                  placeholder="请输入反馈信息"
                ></el-input>
              </el-form-item>

            </el-form>

            <el-form v-show="activeId == 1" ref="form" :model="form" :rules="rules" label-width="120px">
              <div v-if="userInfo.role==1||userInfo.role==4">

                <el-form-item label="发票号码：" prop="ino" required>
                  <el-input
                    v-model="form.ino"
                    placeholder="请输入发票号码"
                  ></el-input>
                </el-form-item>

                <el-form-item label="发票信息：" required>
                  <div class="select-photo-box">
                    <el-upload
                      class="avatar-uploader"
                      :action="uploadUrl"
                      name="img"
                      :headers="headers"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      :on-error="handleAvatarError"
                    >
                      <img v-if="showImageUrl" :src="showImageUrl" class="avatar" style="    max-width: 600px;"/>
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="select-right-box">
                      <!--<el-button type="primary" plain size="small">查看示例</el-button>-->
                      <div class="select-text-box">
                        提示信息：请上传完整信息的发票
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </div>
            </el-form>
            <el-form v-show="activeId == 2" ref="form" :model="form" :rules="rules" label-width="120px">
              <div v-if="userInfo.role==1||userInfo.role==4">

                <el-form-item label="收件人：" prop="rName">
                  <el-input
                    v-model="form.rName"
                    placeholder="请输入收件人"
                  ></el-input>
                </el-form-item>
                <el-form-item label="收件人地址：" prop="rAddress">
                  <el-input
                    v-model="form.rAddress"
                    placeholder="请输入收件人地址"
                  ></el-input>
                </el-form-item>
                <el-form-item label="手机号码：" prop="rPhone">
                  <el-input
                    v-model="form.rPhone"
                    placeholder="请输入手机号码"
                  ></el-input>
                </el-form-item>
                <el-form-item label="邮政编码：" prop="rCode">
                  <el-input
                    v-model="form.rCode"
                    placeholder="请输入邮政编码"
                  ></el-input>
                </el-form-item>
                <el-form-item label="物流公司：" prop="tCompany">
                  <el-input
                    v-model="form.tCompany"
                    placeholder="请输入物流公司"
                  ></el-input>
                </el-form-item>
                <el-form-item label="快递单号：" prop="tno">
                  <el-input
                    v-model="form.tno"
                    placeholder="请输入快递单号"
                  ></el-input>
                </el-form-item>
              </div>
              <!--<div style="text-align: center;">-->
                <!--<el-button type="primary">确认发出</el-button>-->
              <!--</div>-->
            </el-form>

          </template>

          <!--用户信息展示-->
          <template v-else>
            <div class="top-alert-box" style="margin-bottom: 1rem;">
              专用发票税率：6%；开票⾦额必须⼤于1000。
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="用户名：" prop="account" v-if="!isNewInvoice">
                <el-input
                  v-model="form.account"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>
              <el-form-item label="可开票金额：" prop="balance">
                <el-input

                  placeholder="请输入可开票金额"
                  :value="'￥'+(userInfo.leftInvoiceAMount*0.01).toFixed(2)"
                  disabled
                ></el-input>
              </el-form-item>


              <el-form-item v-if="!isNewInvoice" label="开票金额：" prop="amount">
                <el-input
                  :value="'￥'+(form.amount*0.01).toFixed(2)"
                  placeholder="请输入开票金额"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>

              <el-form-item v-else label="开票金额：" prop="amount">
                <el-input
                  v-model="form.amount"
                  placeholder="请输入开票金额"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>

              <el-form-item label="发票抬头：" prop="title">
                <el-input
                  v-model="form.title"
                  placeholder="请输入公司名称"
                  :disabled="!isNewInvoice"
                ></el-input>
                <div class="input-sign-box">
                  提示：平台将对税号和发票抬头进行匹对核实
                </div>
              </el-form-item>
              <el-form-item label="发票类型：" prop="kind">
                <el-radio-group v-model="form.kind" >
                  <el-radio :disabled="!isNewInvoice" :label="1"
                  >增值税普通发票
                  </el-radio
                  >
                  <el-radio :disabled="!isNewInvoice" :label="2"
                  >增值税专业发票
                  </el-radio
                  >
                </el-radio-group>
              </el-form-item>
              <el-form-item label="纳税人识别号：" prop="sno">
                <el-input
                  v-model="form.sno"
                  placeholder="请输入公司的纳税人识别号"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>
              <el-form-item label="地址：" prop="iAddress">
                <el-input
                  v-model="form.iAddress"
                  placeholder="请输入公司实际办公地址信息"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>

              <el-form-item label="电话：" prop="iPhone">
                <el-input
                  v-model="form.iPhone"
                  placeholder="请输入公司的官方电话"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户行：" prop="iBank">
                <el-input
                  v-model="form.iBank"
                  placeholder="请输入对公账户开户行"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>
              <el-form-item label="银行账号：" prop="iBankCode">
                <el-input
                  v-model="form.iBankCode"
                  placeholder="请输入对公账户"
                  :disabled="!isNewInvoice"
                ></el-input>
              </el-form-item>

            </el-form>

          </template>


          <div class="bottom-btn-box" style="display: flex;justify-content: center;">
            <el-button type="primary" @click="hkSubmitForm" v-if="isNewInvoice" :disabled="userInfo.leftInvoiceAMount<=0"
            >提交申请
            </el-button
            >
            <!--<el-button v-if="userInfo.role==2" :type="pro_value.exStatus==3?'success':'danger'" disabled>{{pro_value.status_text}}</el-button>-->
            <div v-else style="margin-right: 1rem;">
              <template v-if="(userInfo.role==1||userInfo.role==4)">
                <template v-if="form.status==1">
                  <el-button type="primary" @click="hkSetUp(3)">通过</el-button>
                  <el-button type="danger" @click="hkSetUp(2)">不通过</el-button>
                </template>
                <template v-else-if="form.status==2">
                  <el-button type="primary" >已审核失败</el-button>
                </template>
                <template v-else-if="form.status==3">
                  <el-button type="primary" @click="hkSetUp(4)">上传发票信息</el-button>
                </template>
                <template v-else-if="form.status==4">
                  <el-button type="primary" @click="hkSetUp(5)">提交物流</el-button>
                </template>
                <template v-else-if="form.status==5">
                  <el-button type="primary" disabled>已完成</el-button>
                </template>
              </template>
              <el-button v-else :type="form.status | filiterTagType">
                {{ form.status | filiterTagText }}
              </el-button>
            </div>


            <el-button type="info" plain @click="hkCancel">{{
              isNewInvoice ? "取消" : "返回"
              }}
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import LineHeader from "@/components/line-header/index";
  import {isNull, invoiceStatusList, hkShowErrorText} from "@/utils/tools";
  import {trace} from "@/utils/trace"
  import {mapGetters} from "vuex"
  import {getToken} from "../../../utils/auth"
  import xStep from "../../../components/xStep/xStep"

  export default {
    components: {xStep, LineHeader},
    props: {},
    data() {
      return {
         radio:'1',
        activeId: 0,
        list: [
          "审核开票信息",
          "编辑发票信息",
          "确认发出",
        ],
         isNewInvoice: true, //是否是新建
        // let {amount,title,kind,sno,iAddress,iPhone,iBank,iBankCode} = this.form;
        form: {
          balance: "", //可开票金额：
          amount: "", //开票金额：
          title: "", //发票抬头：
          kind: "", //发票类型：1 专用 2 普通
          sno: "", //纳税人识别号：
          iAddress: "", //地址：
          iPhone: "", //电话：
          iBank: "", //开户行：
          iBankCode: "", //银行账号：
          status: 1,    //发票状态 1申请 2审核失败 3通过审核 4上传发票信息 5提交物流信息
          ino: "",
          img: "",
          mark:"",    //管理员审核描述
        },
        rules: {
          amount: [
            {
              required: true,
              message: "请输入开票金额",
              trigger: ["blur", "change"]
            }
          ],
          title: [
            {
              required: true,
              message: "请输入公司名称",
              trigger: ["blur", "change"]
            }
          ],
          sno: [
            {
              required: true,
              message: "请输入公司纳税人识别号",
              trigger: ["blur", "change"]
            }
          ],
          iAddress: [
            {
              required: true,
              message: "请输入公司实际办公地址信息",
              trigger: ["blur", "change"]
            }
          ],
          iPhone: [
            {
              required: true,
              message: "请输入公司的官方电话",
              trigger: ["blur", "change"]
            }
          ],
          iBank: [
            {
              required: true,
              message: "请输入对公账户开户行",
              trigger: ["blur", "change"]
            }
          ],
          iBankCode: [
            {
              required: true,
              message: "请输入对公账户",
              trigger: ["blur", "change"]
            }
          ]
        },

        headers: {},
        uploadUrl: process.env.VUE_APP_BASE_API + "/file",
        showImageUrl: "",
      };
    },
    filters: {
      filiterTagType(val) {
        return invoiceStatusList.find(item => {
          return item.key == val;
        }).type;
      },
      filiterTagText(val) {
        return invoiceStatusList.find(item => {
          return item.key == val;
        }).label;
      }
    },
    watch: {},
    computed: {
      ...mapGetters(["userInfo", "invoiceList"])
    },
    methods: {


      // 审核
      hkSetUp(status) {

        // let mark = "管理员-发票审核服务";
        // let status = 3;   //2 fail ; 3 success

        if(status==2||status==3){
          let {id, ino, img,mark} = this.form;
          this.$store.dispatch('finance/invoiceStatus', {id, mark, status}).then((data) => {
            trace("seoAudit-启用推广-data", data);
            this.$router.back();
          })
            .catch((err) => {
              trace("启用广-seoAudit-err", err)
            })
        }else if(status==4){    //提交发票信息

          let {id, ino, img,mark} = this.form;
          mark =  "管理员-提交发票信息";
          this.$store.dispatch('finance/invoiceDetail', {id, mark, ino,img}).then((data) => {
            trace("seoAudit-启用推广-data", data);
            this.$router.back();
          })
            .catch((err) => {
              trace("启用广-seoAudit-err", err)
            })
        }else if(status==5){    //提交物流信息
          let {id, img,rName,rAddress,rPhone,tCompany,rCode,tno} = this.form;
          this.$store.dispatch('finance/invoiceTransport', {id, img,rName,rAddress,rPhone,tCompany,rCode,tno}).then((data) => {
            trace("seoAudit-启用推广-data", data);
            this.$router.back();
          })
            .catch((err) => {
              trace("启用广-seoAudit-err", err)
            })
        }
      },
      // 取消
      hkCancel() {
        this.$router.back();
      },
      // 提交
      hkSubmitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.isNewInvoice = false;
            let {amount, title, kind, sno, iAddress, iPhone, iBank, iBankCode} = this.form;
            amount *= 100;

            this.$store.dispatch('finance/invoice', {
              amount,
              title,
              kind,
              sno,
              iAddress,
              iPhone,
              iBank,
              iBankCode
            }).then((data) => {
              trace("invoice-申请开发票-data", data);
              this.$router.back();
            })
              .catch((err) => {
                trace("申请开发票-invoice-err", err)
              })
            // this.$router.replace()
          } else {
            return false;
          }
        });
      },

      handleAvatarSuccess({data}, file) {
        this.showImageUrl = URL.createObjectURL(file.raw);
        this.form.img = data.url;

      },
      handleAvatarError(err) {
        hkShowErrorText(err.message);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;
        return isLt2M;
      },
    },
    created() {
      this.isNewInvoice = isNull(this.$route.query);
      var query = this.$route.query;
      let id = query.id;

      // trace("invoiceList=",this.invoiceList)
      if (id && this.invoiceList) {
        let obj = this.invoiceList.data.find(item => {
          return item.id == id;
        })

        if (obj) {
          this.form = obj;
          //发票状态 1申请 2审核失败 3通过审核 4上传发票信息 5提交物流信息
          if (this.form.status == 1) {
            this.activeId = 0
          } else if (this.form.status == 3) {
            this.activeId = 1
          } else if (this.form.status == 4) {
            this.activeId = 2
          } else {
            this.activeId = 0
          }
        }
      }
    },
    mounted() {
      this.headers["Authorization"] = "Bearer " + getToken();
    },
    beforeDestroy() {

    }
  };
</script>
<style lang="scss" scoped>
  ::v-deep .is-disabled {
    .el-input__inner {
      color: #606266 !important;
    }
  }

  ::v-deep .el-radio__input.is-checked + .el-radio__label {
    color: #409eff;
  }

  .card-body {
    margin: 0 auto;
    max-width: 800px;

    .top-alert-box {
      background: #d5d8da28;
      border-radius: 4px;
      text-align: left;
      padding: 15px 30px;
      font-weight: 400;
      color: #ff1f34;
      margin: 0 auto;
    }

    .invoice-content-box {
      margin: 40px;

      .top-step {
        background-color: rgba(237, 241, 244, 0.5);
        padding: 0.6rem;
        margin-bottom: 2rem;

        .container {
          background-color: #f6f8f9;
          padding: 20px;
        }
      }

      .input-sign-box {
        font-size: 12px;
        font-weight: 400;
        color: #c1c1c1;
      }

      .bottom-btn-box {
        text-align: center;
      }
    }
  }
</style>
